<template>
  <!-- 商品详情 -->
  <div class="cate">
    <span class="tui" @click="goTo2"
      ><van-icon size="32" name="arrow-left"
    /></span>
    <div class="cate_detail_img" v-if="list.img">
      <img :src="`${list.img}`" />
    </div>
    <!-- 商品简介 -->
    <div class="cate_detail_intro">
      <div class="cate_detail_price">
        <h3>{{ list.name }}</h3>
        <p>
          ￥{{ list.price }} <span>已售{{ list.payer_num }}份</span>
        </p>
      </div>
      <div class="introduce">美食简介</div>
      <p>&emsp;&emsp;{{ list.description }}</p>
    </div>
    <!-- 商品评价 -->
    <div class="cate_detail_evaluate" @click="goTo">
      <span>查看更多<span></span></span>
      <h3>美食评价 ({{ num }})</h3>
      <ul>
        <li>好评 ({{ good }})</li>
        <li>中评 ({{ ordinary }})</li>
        <li>差评 ({{ bad }})</li>
      </ul>
      <div class="evaluate">
        <!-- 顶部 -->
        <div class="evaluate_top">
          <div class="evaluate_top_img">
            <img v-if="list2.img" :src="`${list2.img}`" />
          </div>
          <p class="no" v-if="!list2.num">该商品暂时没有评价哦</p>
          <div class="evaluate_top_right" v-if="list2.num">
            <p class="evaluate_top_name">{{ list2.userName }}</p>
            <van-rate
              v-model="list2.num"
              readonly
              size="15"
              gutter="2"
              color="#ff690c"
            />
            <span>{{ list2.topic_time }}</span>
          </div>
        </div>
        <div class="evaluate_bottom">{{ list2.content }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Evaluate from "@/components/Evaluate.vue";
import { getFunc } from "@/http/request.js";

export default {
  components: {
    Evaluate,
  },
  data() {
    return {
      list: {},
      list2: {},
      num: 0,
      good: 0,
      ordinary: 0,
      bad: 0,
    };
  },
  methods: {
    // /cate/detail?cate_id=001
    goTo() {
      this.$router.push(
        `/CateDetail/evaluate?cate_id=${this.$route.query.cata_id}`
      );
    },
    goTo2() {
      this.$router.go(-1);
    },
    async initCate() {
      // 请求服务器获取美食信息
      await getFunc(`/cate/detail?cate_id=${this.$route.query.cata_id}`).then(
        (data) => {
          if (data.code == 200) {
            this.list = data.result[0];
          }
        }
      );
      getFunc(`/cate/comment/?cate_id=${this.$route.query.cata_id}`).then(
        (data) => {
          if (data.code == 200) {
            // console.log(data);
            this.num = data.result.length;
            let data_ = data.result;
            data_.forEach((i) => {
              if (i.num == 5) {
                this.good++;
              } else if (i.num > 2 && i.num < 5) {
                this.ordinary++;
              } else {
                this.bad++;
              }
            });

            let num = data.result.length - 1 || 0;
            this.list2 = data.result[num];
          }
        }
      );
    },
  },

  mounted() {
    this.initCate();
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";
.cate {
  .tui {
    position: absolute;
    left: 1vw;
    top: 1vw;
  }
  .cate_detail_img {
    width: 100%;
    height: 100vw;
    img {
      width: 100%;
      height: 100%;
    }
  }
  //   简介
  .cate_detail_intro {
    padding: $p;
    .cate_detail_price {
      border-bottom: 0.2667vw solid #ccc;
      h3 {
        font-weight: normal;
        margin: 2vw 0;
      }
      p {
        color: $bgc;
        font-weight: 600;
        font-size: 4.8vw;
        position: relative;
        span {
          font-size: 3.2vw;
          color: #bbb;
          font-weight: normal;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }
    & > p {
      margin-top: 5vw;
    }
    .introduce {
      font-size: 5vw;
      margin-top: 5vw;
    }
  }
  //   评价
  .cate_detail_evaluate {
    padding: $p;
    margin-top: 5vw;
    position: relative;
    & > span {
      position: absolute;
      right: 8vw;
      margin-top: 1vw;
      top: 0;
      font-size: 3.7333vw;
      span {
        display: inline-block;
        width: 3.7333vw;
        height: 5.12vw;
        background: url("@/assets/右.png") no-repeat center;
        background-size: 100%;
        position: absolute;
        right: -4vw;
      }
    }
    h3 {
      font-weight: normal;
    }
    ul {
      margin-top: 2vw;
      display: flex;
      flex-wrap: wrap;
      li {
        height: 6vw;
        padding: 0.3vw 1vw;
        margin-right: 1.5vw;
        background-color: #f5ece7;
        border-radius: 1.5vw;
        font-size: 3.7333vw;
      }
    }
  }
  .no {
    font-size: 3.2vw;
    color: #aaa;
  }
}
</style>